<template>
  <div class="header">
    <!-- 左侧logo -->
    <div class="logo" @click="refresh">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        version="1.1"
        x="0px"
        y="0px"
        viewBox="0 0 66 66"
        enable-background="new 0 0 66 66"
        xml:space="preserve"
      >
        <g>
          <path
            d="M29.4,18.2c-0.6,0-1.1-0.5-1.1-1.1c0-0.3,0.1-0.6,0.3-0.8c-0.2-0.1-0.5-0.1-0.7-0.1c-1.4,0-2.5,1.1-2.5,2.5   c0,1.4,1.1,2.5,2.5,2.5c1.4,0,2.5-1.1,2.5-2.5c0-0.3-0.1-0.6-0.2-0.9C30,18.1,29.7,18.2,29.4,18.2z M27.2,20   c-0.3,0-0.6-0.3-0.6-0.6c0-0.3,0.3-0.6,0.6-0.6c0.3,0,0.6,0.3,0.6,0.6C27.8,19.7,27.5,20,27.2,20z"
          ></path>
          <path
            d="M40.5,20.4c-0.5,0-0.9-0.4-0.9-0.9c0-0.3,0.1-0.5,0.3-0.6c-0.2-0.1-0.4-0.1-0.6-0.1c-1.1,0-2,0.9-2,2c0,1.1,0.9,2,2,2   c1.1,0,2-0.9,2-2c0-0.2-0.1-0.5-0.1-0.7C41,20.3,40.8,20.4,40.5,20.4z M38.7,21.9c-0.3,0-0.5-0.2-0.5-0.5c0-0.3,0.2-0.5,0.5-0.5   c0.3,0,0.5,0.2,0.5,0.5C39.3,21.6,39,21.9,38.7,21.9z"
          ></path>
          <g>
            <path
              d="M57.5,52c6.7-7.6,2.8-21.6-4.5-25.5c10.5-13.8,1.6-27.5-8.5-25.1c-3.2,0.7-5.3,3.2-5.6,5.7c-0.4,3.4,2.5,5.8,5.1,5.1    c1.5-0.4,2.4-1.8,2.2-3.1c-0.2-1.5-1.8-2.3-3-1.6c-0.6,0.4-0.6,0.8-0.5,0.8c0.1,0.1,0.3-0.2,0.7-0.4c0.9-0.4,1.9,0.2,2,1.3    c0.1,0.9-0.8,1.7-1.6,1.8c-1.6,0.3-3.3-1.4-2.7-3.5c1.3-4.5,10.3-3.6,9.9,3.9c-0.1,3.2-2.1,5.6-4.8,7.5c-0.7-0.4-1.4-0.7-2.2-1    c-2-4.4-6.4-6.5-9.3-3.5C31.6,6.7,23,9.7,21.3,18.3c-0.8,0.4-1.5,0.7-2.1,1.2c-2.6-1.2-4.7-2.9-5.3-5.7c-0.7-3.3,1.2-6,4-6.4    c1.4-0.2,3.1,0.4,3.8,1.7c0.8,1.7-0.3,3.3-1.7,3.3c-0.8,0-1.6-0.5-1.6-1.3c-0.1-0.9,0.7-1.6,1.5-1.3c0.4,0.1,0.6,0.3,0.7,0.3    c0.1,0,0-0.4-0.6-0.6c-1.1-0.4-2.3,0.4-2.3,1.8c0,1.1,1,2.1,2.3,2.3c2.3,0.2,4.3-2.1,3.5-5c-1.8-6.4-14.2-5.3-15,5.4    c-0.3,3.6,1.2,8.1,5.2,12.2c-4.3,2-7.3,7.6-8.2,12.3c-0.1,0.2-0.5,2.8-0.3,5.1C5.5,47,7.2,50.4,8.6,52c-1.7,1.2-2.5,5.2-0.7,5.6    c2.1,0.4-1.4-2.7,1.8-4.4c1.1,1.2,0.6,2.6,0.5,3.2C10.2,58,12,58,12.4,56.6c0.2-1-0.3-2.8-1.8-3.8c1.9-0.8,3.3,0.5,2.9,1.7    c-0.7,2.2,1.2,1.7,1.3,0.3c0.2-2.7-2.3-3.9-4.5-3.5c-0.1-1.2-0.2-2.3,0-4c0,0,0,0,0-0.1c0.1-1.3,0.6-2.9,1.2-4.4l0,0    c0.6-1.3,1.3-2.4,2.3-3.4c0.8,3.8,2.2,7.1,3.9,9.9c-0.2,1.5-0.1,3.2,0.5,5.3c1.5,5.3,2.7,7.8,3.1,8.6c-1.2-2-6-4.1-8,1.9h10.1    c0.7,0,1.2-0.6,1.2-1.2c-0.1-1.3,0-3.2,0.6-4.8c0.3-0.8,1-1.4,1.7-1.9c1.9,0.8,4.1,1.2,6.3,1.2c2.3,0,4.5-0.3,6.5-1.1    c0.7,0.5,1.3,1.1,1.6,1.8c0.6,1.6,0.7,3.5,0.6,4.8c0,0.7,0.5,1.2,1.2,1.2h10.1c-2-6-6.8-3.9-8-1.9c0.4-0.8,1.5-3.3,3.1-8.6    c0.6-2,0.7-3.7,0.5-5.2c1.7-2.7,3-5.8,3.8-9.5c0.7,0.9,1.3,1.8,1.8,2.9v0c1.9,4,1.2,8,1.2,8.5c-2.2-0.4-4.7,0.8-4.5,3.5    c0.1,1.4,1.9,1.9,1.3-0.3c-0.4-1.2,1.1-2.5,2.9-1.7c-1.5,1-2,2.8-1.8,3.8c0.3,1.4,2.1,1.4,2.1-0.2c0-0.7-0.6-2,0.5-3.2    c3.2,1.7-0.3,4.8,1.9,4.4C60,57.1,59.1,53.1,57.5,52z M39.8,16c2.2,0,4,2.1,4,4.7c0,2.6-1.8,4.7-4,4.7c-2.2,0-4-2.1-4-4.7    C35.8,18.1,37.6,16,39.8,16z M27.3,12.5c2.9,0,5.2,2.8,5.2,6.2c0,3.4-2.3,6.2-5.2,6.2c-2.9,0-5.2-2.8-5.2-6.2    C22.1,15.2,24.4,12.5,27.3,12.5z M46.8,40.8c-3,4.2-8,6.7-13.5,6.7c0,0,0,0,0,0c-5.5,0-10.5-2.5-13.5-6.8c-2.9-4.1-3.2-9.5-0.8-12    c2-2,5.2-1.7,8.8,0.7c3.2,2.2,7.7,2.2,10.9,0c5.1-3.4,7.8-1.6,8.8-0.6C50.1,31.4,49.8,36.6,46.8,40.8z"
            ></path>
            <path
              d="M40.4,29.6c0.3,0.6,0.8,1.7,0.7,2.1c-0.2,0.7-1.5,2.3-3,1.6c-0.4-0.2-0.7-1.4-0.8-2c-0.1,0-0.3,0.1-0.4,0.1    c0.3,0.6,0.7,1.7,0.5,2.1c-0.5,1-2.5,1.3-3.4,0.6c-0.4-0.3-0.4-1.5-0.4-2.2c-0.4,0-0.8,0-1.3-0.1c0.1,0.7,0.3,1.9-0.1,2.2    c-0.7,0.7-2.4,0.3-2.9-0.6c-0.2-0.4,0.1-1.6,0.3-2.2c-0.1,0-0.2-0.1-0.4-0.1c-0.1,0.7-0.2,1.9-0.6,2.1c-1.5,0.8-2.7-0.9-3-1.6    c-0.2-0.4,0.2-1.6,0.5-2.2c-1.4-0.8-2.7-1.2-3.8-1.2c-1,0-1.9,0.3-2.6,1c-1.9,1.9-2.1,6.6,0.9,10.8c1.2,1.7,2.9,3.2,4.7,4.2    c0.1-0.7,0.2-1.9,0.7-2.1c1-0.4,2.5,0.4,3,1.4c0.2,0.4-0.2,1.5-0.4,2.1c0.2,0.1,0.3,0.1,0.5,0.2c0-0.7,0.1-1.9,0.5-2.1    c0.7-0.5,2-0.2,2.6,0.5c0.3,0.3,0.2,1.5,0.1,2.2c0.4,0,0.7,0.1,1.1,0.1c0,0,0,0,0,0c0.2,0,0.3,0,0.5,0c-0.2-0.7-0.5-1.8-0.2-2.1    c0.7-0.8,2.3-1,3.2-0.4c0.4,0.2,0.6,1.4,0.7,2.1c0.2,0,0.4-0.1,0.6-0.2c-0.3-0.6-0.8-1.6-0.6-2.1c0.5-1,2-1.7,3.1-1.4    c0.4,0.2,0.7,1.3,0.8,2c1.8-1.1,3.4-2.4,4.6-4.2c2.9-4.1,2.7-8.8,0.8-10.7C45.4,28,43.1,28.1,40.4,29.6z"
            ></path>
          </g>
        </g>
      </svg>
      <h2>菁菁民宿</h2>
    </div>
    <!-- 主菜单 -->
    <div
      class="header-menu"
      :class="{ 'header-menu-change-search': isChangeSearch }"
    >
      <!-- <router-link active-class="active" to="/treasure">百宝箱</router-link>
      <router-link active-class="active" to="/record">记录线</router-link>
      <router-link active-class="active" to="/shortcut">喜捷径</router-link> -->
    </div>
    <!-- 搜索框 -->
    <div
      class="search-bar"
      :class="{ 'search-bar-change-search': isChangeSearch }"
    >
      <input
        type="text"
        v-model="key"
        @focusin="changeStyle"
        @focusout="changeStyle"
        @keyup.enter="handleSearch(key)"
        placeholder="请输入关键字"
      />
    </div>
    <!-- 头像区域 -->
    <div class="header-profile">
      <div class="notification">
        <el-dropdown v-if="isLogin">
          <div>
            <el-avatar :size="40" :src="user.avatar" /><span
              class="text-cool-gray-100"
              >{{ user.nickName }}</span
            >
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="router.push('/profile')"
                >个人中心</el-dropdown-item
              >
              <el-dropdown-item @click="handleLogout"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <router-link class="link text-light-50 bg-light-50" v-else to="/login"
          >登录 / 注册</router-link
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

const isChangeSearch = ref(false);
const key = ref("");

const userString = localStorage.getItem("userInfo");
const user = JSON.parse(userString);
const isLogin = ref(false);
if (user) {
  isLogin.value = true;
}

const refresh = () => {
  router.push("/");
};

function changeStyle() {
  isChangeSearch.value = !isChangeSearch.value;
  console.log("聚焦");
}
const handleLogout = () => {
  localStorage.clear();
  isLogin.value = false;
  router.push("/login");
};
const handleSearch = (key) => {
  router.push(`/search/${key}`);
};
</script>

<style lang="scss" scoped>
.link {
  color: #ffff;
}
.header {
  // background-color: skyblue;
  background: black;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 58px;
  width: 100%;
  border-bottom: 1px solid rgba(113 119 144 / 25%);
  padding: 0 30px;
  white-space: nowrap;
  @media screen and (max-width: 480px) {
    padding: 0 16px;
  }

  .logo {
    width: 96px;
    height: 30px;
    margin-right: 110px;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;

    @media screen and (max-width: 945px) {
      display: none;
    }

    h2 {
      background-image: linear-gradient(#dc81f1, #db6ff3);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      cursor: pointer;
    }
    svg {
      //fill:currentColor;
      fill: #db6ff3;
      cursor: pointer;
    }
  }

  /* .head-menu */
  &-menu {
    display: flex;
    align-items: center;
    a {
      padding: 20px 30px;
      text-decoration: none;
      color: rgb(60, 62, 70);
      border-bottom: 2px solid transparent;
      transition: 0.3s;
      @media screen and (max-width: 610px) {
        &:not(.main-header-link) {
          display: none;
        }
      }
    }
    a:hover,
    a.active {
      color: #ffffff;
      border-bottom: 2px solid #ffffff;
    }
  }

  .notify {
    position: relative;
    &:before {
      content: "";
      position: absolute;
      background-color: #3a6df0;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      right: 20px;
      top: 16px;
    }
    @media screen and (max-width: 1055px) {
      display: none;
    }
  }

  .search-bar {
    height: 40px;
    display: flex;
    width: 100%;
    max-width: 400px;
    padding-left: 150px;
    border-radius: 4px;
    border: none;
    input {
      width: 100%;
      height: 100%;
      border: none;
      outline: none;
      background-color: #b7bbea;
      background-color: white;
      border-radius: 4px;
      font-family: "Poppins", sans-serif;
      font-size: 15px;
      font-weight: 500;
      padding: 0 20px 0 40px;
      //box-shadow: 0 0 0 2px rgb(134 140 160 / 0%);
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56.966 56.966' fill='%23717790c7'%3e%3cpath d='M55.146 51.887L41.588 37.786A22.926 22.926 0 0046.984 23c0-12.682-10.318-23-23-23s-23 10.318-23 23 10.318 23 23 23c4.761 0 9.298-1.436 13.177-4.162l13.661 14.208c.571.593 1.339.92 2.162.92.779 0 1.518-.297 2.079-.837a3.004 3.004 0 00.083-4.242zM23.984 6c9.374 0 17 7.626 17 17s-7.626 17-17 17-17-7.626-17-17 7.626-17 17-17z'/%3e%3c/svg%3e");
      background-size: 14px;
      background-repeat: no-repeat;
      background-position: 16px 48%;
      //color: #212324;
      &::placeholder {
        font-family: "Poppins", sans-serif;
        color: rgb(131, 131, 237);
        font-size: 15px;
        font-weight: 500;
      }
    }
    input:focus {
      border: 2px solid rgb(192, 134, 192);
    }
  }

  .header-profile {
    display: flex;
    align-items: center;
    //text-align: center;
    padding: 0 16px 0 40px;
    margin-left: auto;
    flex-shrink: 0;

    svg {
      width: 22px;
      color: #f9fafb;
      flex-shrink: 0;
    }

    .notification {
      position: relative;
      top: 2px;
      &-number {
        position: absolute;
        background-color: #3a6df0;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        font-size: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        right: -6px;
        top: -6px;
      }
      & + svg {
        margin-left: 22px;
        @media screen and (max-width: 945px) {
          display: none;
        }
      }
    }

    .profile-img {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid #f9fafb;
      margin-left: 22px;
    }
  }

  /*输入框聚焦后，样式改变 */

  .header-menu-change-search {
    display: none;
  }

  .search-bar-change-search {
    max-width: 600px;
    margin: auto;
    transition: 0.4s;
    box-shadow: 0 0 0 1px rgba(113 119 144 / 25%);
    padding-left: 0;
  }

  .change-search {
    .header-menu,
    .header-profile {
      display: none;
    }
    .search-bar {
      max-width: 600px;
      margin: auto;
      transition: 0.4s;
      box-shadow: 0 0 0 1px rgba(113 119 144 / 25%);
      padding-left: 0;
    }
    .logo {
      margin-right: 0;
    }
  }
}
</style>
